<template>
	<div>
		<router-view/>
		<van-tabbar v-model="active" @change="toRouter">
			<van-tabbar-item v-for="item in icon" :key="item.index">
				<span>{{item.title}}</span>
				<template #icon="props">
					<img :src="props.active ? item.active : item.inactive" />

				</template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>
<script src="../src/utils/adjust.js"></script>
<script>
export default {
	name:"AppHome",
	data(){
		return{
			icon: [
				{
					title:"首页",
					active: [require('../assets/img/tabbar/home_selected.png')],
					inactive: [require('../assets/img/tabbar/home_default.png')],
				},{
					title:"分类",
					active: [require('../assets/img/tabbar/category_selected.png')],
					inactive: [require('../assets/img/tabbar/category_default.png')],
				},{
					title:"吃什么",
					active: [require('../assets/img/tabbar/eat_selected.png')],
					inactive: [require('../assets/img/tabbar/eat_default.png')],
				},{
					title:"购物车",
					active: [require('../assets/img/tabbar/shoppingcart_selected.png')],
					inactive: [require('../assets/img/tabbar/shoppingcart_default.png')],
				},{
					title:"我的",
					active: [require('../assets/img/tabbar/mine_selected.png')],
					inactive: [require('../assets/img/tabbar/mine_default.png')],
				},
			],
			routers:['/','/category','/eat','/shopping','/mine']
		}
	},
	computed:{
		active:{
			get(){
				return this.routers.findIndex(item => this.$route.path == item)
			},
			set(val){
				return val
			}
		}
	},
	methods:{
		toRouter(index){
			// console.log(index);
			this.$router.push(this.routers[index]).catch(err => err)
		}
	}
};
</script>
<style  lang="less">
*{
	margin: 0;
	padding: 0;
}
.van-tabbar{
	width: 100vw !important;
	font-weight: bold;
}
</style>
